/**
 * Author: Lily Jiang
 * Create Time: 2019/12/24
 * Description:
 */

import React from "react";
import { connect } from "react-redux";
import * as actions from "@/store/actions";
import './Index.scss'
import {Link} from 'react-router-dom';
import AppHeader from '@/components/appHeader/Index.js'
import { Toast } from 'antd-mobile';

class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            email: '',
            password: ''
        };
    }

    changeLoadingState = (status) => {
        this.props.dispatch(actions.updateAppSetting({
            appLoading: status
        }))
    }

    inputChange = (e) => {
        this.setState({
            [e.target.dataset.name]: e.target.value.trim()
        })
    }

    login = () => {
        this.changeLoadingState(true)
        React.$api.login({
            password: this.state.password,
            email: this.state.email
        }).then(data => {
            this.props.dispatch(actions.updateAppSetting({
                user: data,
                isLogin: true
            }));

            this.changeLoadingState(false)

            window.localforage.setItem('userInfo', data)

            window.history.back()
        }, err => {
            this.changeLoadingState(false)
            err.msg && Toast.info(err.msg)
        })
    }

    changeTheme = () => {
        this.props.dispatch(actions.changeTheme(this.props.themeType === 'night' ? 'day' : 'night'));
    }

    render() {
        return (
            <div className="app-container page_login">
                {<AppHeader showBottomLine={false}></AppHeader>}

                <div className="main">
                    <div className="title">登录知乎日报</div>
                    <div className="form-wrap">
                        <div className="input-wrap">
                            <div>邮箱</div>
                            <input type="text" data-name="email" value={this.state.email} onChange={this.inputChange} />
                        </div>
                        <div className="input-wrap">
                            <div>密码</div>
                            <input type="password" data-name="password" value={this.state.password} onChange={this.inputChange} />
                        </div>
                        <div className="btn-wrap">
                            <div className="btn" onClick={this.login}>登录</div>
                        </div>
                    </div>

                </div>

                <div className="footer">
                    <div className="footer-item" onClick={this.changeTheme}>
                        <img src={require("../../assets/images/common/yuliang_hei.png")} alt=""/>
                        <div>{this.props.themeType === 'night' ? '日间模式' : '夜间模式'}</div>
                    </div>
                    <Link to="/settings" className="footer-item">
                        <img src={require("../../assets/images/common/shezhi_hei.png")} alt=""/>
                        <div>设置</div>
                    </Link>
                </div>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        themeType: state.app.themeType
    }
}

export default connect(mapStateToProps)(Login)